<template>
  <div class="tunnel relative">
    <page-loading></page-loading>
    <template v-for="(entry, idx) in fields">
      <div class="mb20">
        <div class="form-title">{{entry.title}}</div>
        <template v-for="(item, index) in entry.fields">
          <os-input :item="item" :key="index" v-if="item.value=='input'"
          v-model="params[idx][index]"></os-input>
          <os-switch :item="item" :key="index" v-if="item.value=='switch'"
          v-model="params[idx][index]"></os-switch>
          <os-select :item="item" :key="index" v-if="item.value=='select'" :options="idx==0?encryp:work_mode"
          wholeField v-model="params[idx][index]"></os-select>
        </template>
        <save-btn @click="save(idx)"></save-btn>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        this.$t("service.tunnel.ss_tunnel"),
        this.$t("service.tunnel.ss_redir"),
        this.$t("service.tunnel.dns"),
      ],
      tunnel: this.$t("service.tunnel.ss_tunnel"),
      redir: this.$t("service.tunnel.ss_redir"),
      dns: this.$t("service.tunnel.ss_dns"),
      params: [
        [], [], []
      ],
      tunnel_map: ['enable_mptcp', 'serverip', 'serverport', 'enc', 'key'],
      redir_map: ['enable_mptcp', 'serverip', 'listen_port', 'mode'],
      dns_map: ['enable_mptcp', 'serverip', 'listen_port', 'mode', 'tunnel_peer_ip'],
      work_mode: ['tcp_only','udp_only','tcp_and_udp'],
      encryp: ['none', 'aes-128-gcm', 'aes-192-gcm', 'aes-256-gcm', ]
      // params: {
      //   map: ['', '', ''],
      //   tunnel: {
      //     map: ['', '', '', ''],
      //   },
      //   redir: {

      //   },
      //   dns: {

      //   },
      // }
    }
  },
  methods: {
    save(index) {
      let maps = [this.tunnel_map, this.redir_map, this.dns_map]
      let ops = ["ss_tunnel_server", "ss_redir", "ss_tunnel_dns"]
      console.log(index, this.params[index], maps[index])
      let params = this.arr_to_obj(this.params[index], maps[index])
      console.log(params)
      // return
      this.proxy_req("post", `/webapi?op=config_${ops[index]}`, params, res=> {}, )
    },
    get_state() {
      this.$req.get("/webapi?op=get_ss_tunnel_info").then(res=> {
        this.obj_to_arr(res, this.tunnel_map, this.params[0])
      })
      this.$req.get("/webapi?op=get_ss_redir").then(res=> {
        this.obj_to_arr(res, this.redir_map, this.params[1])
      })
      this.$req.get("/webapi?op=get_ss_dns").then(res=> {
        this.obj_to_arr(res, this.dns_map, this.params[2])
      })
    }
  },
  created() {
    this.$bus.emit("changeTab", 10)
    this.get_state()
  },
}
</script>

<style>
</style>
